<template>
    <div>
        <svg id="mysvg" width="960" height="600"></svg>
    </div>
</template>

<script>
export default {
    methods:{
        init(){
            let params = {
                top:60,
                bottom:60,
                left:60,
                right:60
            }
            var dataset = [
                2.5,2.1,1.7,1.3,0.9
            ];

            // 顶一个线性比例尺
            var scaleLinear = this.d3.scaleLinear()
            .domain([0,this.d3.max(dataset)])
            .range([0,250])

            var rectHeight = 30;
            var svg = this.d3.select('#mysvg');
            var g = svg.append('g').attr('transform',
            "translate(60,60)");
           
            g.selectAll('rect').
            data(dataset)
            .enter()
            .append('rect')
            .attr('x',20)
            .attr('y',(d,i)=>{return i * rectHeight})
            .attr('width',function(d){
                return scaleLinear(d);
            })
            .attr('height',20)
            .attr('fill','red');

            //为坐标轴定义一个线性比例尺
            var xScale = this.d3.scaleLinear()
            .domain([0,this.d3.max(dataset)])
            .range([0,250])

            //定义一个坐标轴
            var xAxis = this.d3.axisBottom(xScale)
            .ticks(7);
            g.append('g')
            .attr('transform',`translate(20,${dataset.length*rectHeight})`)
            .call(xAxis)
        }
    },
    mounted(){
        this.init()
    }
}
</script>
